<template>
  <div class="messages">
    <Collapse v-model="value2" accordion @on-change="handleChange">
        <Panel v-for="(item,index) in dataList" :key="index" :name="(index + 1) + ''">
            <span><Icon type="md-star-outline" :color="item.isread ? '#808695' : '#ff0000'" />{{ item.title }}</span>
            <p slot="content">{{ item.content }}</p>
        </Panel>
    </Collapse>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data () {
    return {
      dataList: this.list,
      value2: ''
    };
  },
  watch: {
    dataList: {
      handler(newV, oldV) {
        this.dataList = newV;
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleChange(val) {
      console.log('open', val, this.dataList[val-1]);
      if (val.length > 0) {
        this.dataList[val-1].isread = 1;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.yes{

}
.no{
  color: #ff0000;
}
</style>
